<template>
  <view class="home-title">
    <image class="title-icon title-icon__left" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/title-icon-1.png" mode="scaleToFill" />
    <view class="content">
      <text v-if="title" class="title">{{ title }}</text>
      <slot v-else />
    </view>
    <image class="title-icon title-icon__right" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/title-icon-1.png" mode="scaleToFill" />
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';

  defineProps({
    title: propTypes.string.def(''),
  });
</script>

<style lang="scss" scoped>
  .home-title {
    position: relative;
    min-height: 40rpx;
    width: 100%;

    .title {
      color: #333;
      font-size: 31rpx;
      padding-left: 10rpx;
      font-weight: bolder;
      display: flex;
      align-items: center;
    }

    .title-icon {
      position: absolute;
      width: 40rpx;
      height: 38rpx;

      &.title-icon__left {
        left: 0;
        top: 0;
      }

      &.title-icon__right {
        right: 0;
        top: 0;
        transform: rotate(180deg);
      }
    }
  }
</style>
